﻿@using Microsoft.AspNetCore.Mvc.Localization
@using Volo.Abp.Users
@using Volo.CmsKit.Localization
@inject ICurrentUser CurrentUser
@model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating.RatingViewModel
@inject IHtmlLocalizer<CmsKitResource> L

<div class="cms-rating-area container" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId" id="cms-rating_{@Model.EntityType}_{@Model.EntityId}">
    @if (CurrentUser.IsAuthenticated)
    {
        <div class="m-auto">
            <span class="my-rating-5" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)"></span>
            <span class="live-rating">@(Model.CurrentRating != null ? Model.CurrentRating + " | " : 0 + "")</span>
            @if (Model.CurrentRating != null)
            {
                <a href="#" class="rating-undo-link m-auto">
                    <i class="fa fa-undo"></i> @L["Undo"]
                </a>
            }
        </div>
        if (Model.Ratings != null)
        {
            <div class="row text-center col-6 mt-3">
                @foreach (var rating in Model.Ratings)
                {
                    <div class="side col-2">
                        <div>@rating.StarCount @L["Star"]</div>
                    </div>
                    <div class="middle col-8">
                        <div class="bar-container">
                            <div class="bar bar-@rating.StarCount" style="width: @(rating.Count * 100 / Model.TotalRating)%"></div>
                        </div>
                    </div>
                    <div class="side col-2">
                        <div>@rating.Count</div>
                    </div>
                }
            </div>
        }
    }
    else
    {
        <span class="my-rating-5" data-authenticated="True" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='text-center'><a href='@Model.LoginUrl' class='btn btn-primary btn-block'>@L["LoginToRate"]</a></div>"></span>
        <span class="rating-login"></span>
    }
</div>